<template>
  <div ref="chartBox" class="chart"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Area } from "@antv/g2plot";
/** @api */
/** @数据 */
let areaData: Area | undefined = undefined;
const chartBox = ref<HTMLDivElement>()
/** @生命周期 */
onMounted(() => {
  initChart()
})
/** @方法 */
/** 初始化图 */
const initChart = () => {
  const data = [{ x: '1', y: 1 }, { x: '3', y: 11 }, { x: '4', y: 21 }, { x: '5', y: 14 }, { x: '6', y: 15 }];
  areaData = new Area(chartBox.value as HTMLDivElement, {
    data: data,
    padding: 'auto',
    xField: 'x',
    yField: 'y',
    xAxis: {
      // type: 'timeCat',
      range: [0.01, 0.99],
      tickCount: 5,
      line: {
        style: {
          stroke: '#5285b3'
        }
      },

    },
    yAxis: {
      // type: 'timeCat',
      tickCount: 5,
      title: {
        text: '吨',
        position: 'end',
        offset: 30,
        style: {
          fill: '#CEE6DD'
        }
      },
      label: {
        style: {
          fill: '#CEE6DD'
        }
      },
      line: {
        style: {
          stroke: '#5285b3'
        }
      },
      grid: {
        line: {
          style: {
            fill: '#1d3650'
          }
        }
      }
    },
    tooltip: {
      domStyles: {
        "g2-tooltip": {
          "background-color": "#283A62",
          "box-shadow": "none",
        },
        "g2-tooltip-title": { color: "#ffffff" },
        "g2-tooltip-list": { color: "#283A62" },
        "g2-tooltip-list-item": { color: "rgba(135, 196, 251, 1)" },
        "g2-tooltip-marker": { color: "#283A62" },
        "g2-tooltip-value": { color: "#ffffff" },
        "g2-tooltip-name": { color: "rgba(135, 196, 251, 1)" },
      },
    },
    areaStyle: () => {
      return {
        fill: 'l(270) 0:rgba(84, 133, 232, 0.2) 0.5:rgba(84, 133, 232, 0.5) 1:#3970e3',
      };
    },
  });
  areaData.render()
}
/** @侦听器 */
/** @公共方法 */
</script>
<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>